<template>
  <div class="card">
    <div class="item" v-for="(item, index) in list" :style="[{'background':'var(--el-bg-color)','color':item.color}]">
        <img src="@/assets/vue.svg" alt="" class="img">
        <div class="name">{{ item.name }}</div>
        <div class="num">{{ item.num }}</div>
    </div>
  </div>
</template>
    <script>
export default {
  data() {
   return {
    list:[
      {
        name:'Employees',
        num:99,
        bgColor:'rgb(236,242,255)',
        color:'rgb(93,135,255)'
      },
      {
        name:'Clients',
        num:190,
        bgColor:'rgb(254,245,229)',
        color:'rgb(255,174,31)'

      },
      {
        name:'Projects',
        num:99,
        bgColor:'rgb(232,247,255)',
        color:'rgb(73,190,255)'
      },
      {
        name:'Events',
        num:666,
        bgColor:'rgb(253,237,232)',
        color:'rgb(250,137,107)'
      },
      {
        name:'Payroll',
        num:929,
        bgColor:'rgb(230,255,250)',
        color:'rgb(19,222,185)'
      },
      {
        name:'Reports',
        num:39,
        bgColor:'rgb(236,242,255)',
        color:'rgb(93,135,255)'
      },
      
    ]
   }
  },
  methods: {},
};
</script>
       
    <style lang="scss" scoped>
.card {
  display: grid;
  justify-items: stretch;
  grid-template-columns : repeat(6,auto);
  grid-row-gap: 15px;
  grid-column-gap:15px;
  // flex-wrap: wrap;
  padding: 0;
  margin: 0px 0px 15px 0px;
  .item {
    background: #fff;
    // width: 180px;
    // height: 180px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    padding: 30px;
    .img{
      margin-bottom: 15px;
    }
    .name{
      font-weight: 700;
      margin-bottom: 1px;
    }
    .num{
      font-weight: 700;
    }
  }
}
</style>